<!--
 * @Author       : Hejh(3010733382@qq.com)
 * @Version      : V1.0
 * @Date         : 2024-04-18 15:57:57
 * @Description  : 文件操作日志时间线
-->

<template>
  <div class="source-timeline p-2" v-loading="loading">
    <n-grid cols="1" x-gap="12" y-gap="12" responsive="screen">
      <n-gi class="my-time-line">
        <MyTimeLine :data="data" @source-click="handleSourceClick"></MyTimeLine>
        <n-pagination
          class="mt-2"
          :label="pagination.label"
          :page="pagination.page"
          :page-size="pagination.pageSize"
          :size="pagination.size"
          :page-slot="pagination.pageSlot"
          :show-size-picker="pagination.showSizePicker"
          :suffix="pagination.suffix"
          :page-sizes="pagination.pageSizes"
          :item-count="pagination.itemCount"
          @update:page="pagination.onChange"
          @update:page-size="pagination.onUpdatePageSize"
        />
      </n-gi>
    </n-grid>
  </div>
</template>

<script lang="ts" setup>
import { type PaginationProps } from 'naive-ui'
import useUserStore from '@/stores/modules/user'
import { getSourceLogById } from '@/api/source'
import type { LogRes } from '@/types/log'

import { MyTimeLine } from '@/utils/MyTimeLine'
import { navTypeList } from '@/constants/explorer'
import { events } from '@/utils/bus.js'

const props = defineProps<{
  sourceId: string
}>()

const loading = ref(false)

const data = ref<LogRes[]>([])

watch(
  () => props.sourceId,
  () => {
    loadSourceLogsById()
  }
)

onMounted(() => {
  loadSourceLogsById()
})

const loadSourceLogsById = () => {
  loading.value = true
  getSourceLogById({
    page: pagination.page,
    pageSize: pagination.pageSize,
    sourceId: props.sourceId
  })
    .then((res) => {
      data.value = res.data.items
      pagination.pageCount = res.data.pages
      pagination.itemCount = res.data.total
    })
    .catch(console.error)
    .finally(() => {
      loading.value = false
    })
}

const pagination = reactive<PaginationProps>({
  page: 1,
  pageSize: 200,
  size: 'small',
  pageCount: 3,
  itemCount: 150,
  pageSlot: 7,
  showSizePicker: true,
  label: (info) => {
    return h(
      NButton,
      {
        type: info.active ? 'primary' : 'tertiary',
        secondary: !info.active,
        style: {
          width: '100%',
          height: '100%'
        }
      },
      { default: () => info.node }
    )
  },
  suffix({ itemCount }) {
    return `${itemCount}条记录`
  },
  pageSizes: [
    {
      label: '10条/每页',
      value: 10
    },
    {
      label: '50条/每页',
      value: 50
    },
    {
      label: '100条/每页',
      value: 100
    },
    {
      label: '200条/每页',
      value: 200
    },
    {
      label: '500条/每页',
      value: 500
    },
    {
      label: '1000条/每页',
      value: 1000
    },
    {
      label: '2000条/每页',
      value: 2000
    }
  ],
  onChange: (page: number) => {
    pagination.page = page
    // emits('pageChange', page, undefined)
    loadSourceLogsById()
  },
  onUpdatePageSize: (pageSize: number) => {
    pagination.pageSize = pageSize
    pagination.page = 1
    // emits('pageChange', 1, pageSize)
    loadSourceLogsById()
  }
})

const handleSourceClick = (sourceInfo: any) => {
  if (+sourceInfo.isDir === 0) {
    events.emit('node-click', {
      nav: {
        key: sourceInfo.parentId,
        label: sourceInfo.filename,
        myType: navTypeList.SOURCE
      },
      sourceInfo
    })
    return
  }

  // 文件夹处理
  events.emit('node-click', {
    nav: {
      key: sourceInfo.id,
      label: sourceInfo.filename,
      myType: navTypeList.SOURCE
    }
  })
}
</script>

<style lang="scss" scoped>
.source-timeline {
  .my-time-line {
    :deep(.list-item-a) {
      background: #f6f9ff;
      color: #789;
      border: 1px solid #dbf1ff;
      padding: 5px;
      margin: 0 0 10px 0px;
      position: relative;
      min-height: 35px;
      line-height: 1.4em;
      border-radius: 4px;
      word-break: break-word;
    }

    :deep(.n-pagination .n-pagination-item) {
      padding: 0 !important;
      border: 0;
      width: 25px !important;
      height: 25px !important;
      min-width: 25px;

      & .n-button {
        height: 100%;
        width: 100%;
        min-width: 25px;
        min-height: 25px;
        padding: 0;
        margin: 0;
      }
    }
  }
}
</style>
